import { Typography, Card } from "tdesign-react";
import { StopIcon } from "tdesign-icons-react";
const { Title, Paragraph } = Typography;
const TimelineItem = (props: any) => {
	const { version, time, introduce, Features } = props.info;
	return (
		<div className="time-line-item">
			<Card className="log-card">
				<div className="log-header">
					<Title level="h2">
						{version}&emsp;{time}
					</Title>
					<Paragraph>{introduce}</Paragraph>
				</div>

				<div className="features-container">
					{Features.map((feature: any, featureIndex: any) => (
						<Paragraph key={featureIndex} className="feature-item">
							<Title level="h3">{feature.name}</Title>
							{feature.content.map((item: any, itemIndex: any) => (
								<Paragraph key={itemIndex}>
									<StopIcon />
									{item}
								</Paragraph>
							))}
						</Paragraph>
					))}
				</div>
			</Card>
		</div>
	);
};
export default TimelineItem;
